{% extends "school/layout.html" %}

{% set page_title = translate('教室管理') %}

{% block css %}
<style type="text/css">
    .m-back{
        max-width: 1250px;
        min-width: 900px;
        text-align: right;
    }
    div.m-back>button{
        width:100px;
        margin-left:-5px;
        border-radius: 0;
    }
    div.m-back>.arrow{
        width:0;
        height: 0;
        display: inline-block;
        border-top:17px solid transparent;
        border-bottom: 17px solid transparent;
        border-right: 34px solid rgb(70%,70%,70%);
        vertical-align: top;
    }
    .intro-container{
        padding: 10px 50px;
    }
</style>
{% endblock %}

{% block content %}
<div class="m-classroom-show">
<div class="m-fixed-table-top">
    <div class="title">
        <div class="name">{{translate('教室信息')}}</div>
    </div>
    <!-- <div class="toolbars">
        <a href="{{ url_for('school.create_class') }}" class="new" id="return">返回</a>
    </div> -->
</div>

<div class="m-fixed-table-container">
    <div class="intro-container">
        <table class="table table-bordered table-center">
            <tr>
                <th>{{translate('系统使用权限')}}</th>
                <th>{{translate('状态')}}</th>
                <th>{{translate('开始使用日期')}}</th>
                <th>{{translate('使用到期日')}}</th>
            </tr>
            {% for data in charge_fee_array %}
            <tr>
                <td>
                    {{data.name}}
                    {% if data.about_to_expire and not in_user_verify_whitelist %}
                        <div class="superior"><div class="superior-word">{{translate('即将到期')}}</div></div>
                    {% endif %}
                </td>
                <td>{{data.status}}</td>
                <td>{{data.start_date}}</td>
                <td>{{data.end_date}}</td>
            </tr>
            {% endfor %}
        </table>

        {% if not in_user_verify_whitelist %}
        <div class="intro">
            <p>{{translate('说明')}}：</p>
            <p>- {{translate('系统使用权限是指教学系统是否可以使用,在有系统使用权限的前提下可以使用已购买的课程')}}</p>
            <p>- {{translate('计时规则: 新购教室(指直接购买2.0教室,非1.0升级、非续费)以教室首次初始化开始计时；从1.0升级到2.0的教室,以及后续续费,从订单"申请发货"开始计时')}}</p>
            <p>- {{translate('系统维护费到期未续费,系统将无法使用,原先拥有的课程权限继续保留,续费成功后,可以继续使用尚未过期的课程')}}</p>
        </div>
        <table class="table table-bordered table-center">
            <tr>
                <th>{{translate('课程类型')}}</th>
                <th>{{translate('状态')}}</th>
                <th>{{translate('开始使用日期')}}</th>
                <th>{{translate('使用到期日')}}</th>
            </tr>
            {% for data in package_fee_array %}
            <tr>
                <td>
                    {{translate(data.name)}}
                    {% if data.about_to_expire %}
                        <div class="superior"><div class="superior-word">{{translate('即将到期')}}</div></div>
                    {% endif %}
                </td>
                <td>{{data.status}}</td>
                <td>{{data.start_date}}</td>
                <td>{{data.end_date}}</td>
            </tr>
            {% endfor %}
        </table>
        {% endif %}

        <!-- <div class="intro">
            <p>{{translate('注：儿童课2.0版、成人课、老年课，分别从课程第一次“开始上课”开始计时。')}}</p>
        </div> -->
    </div>
    <ul class="m-ul-table">
        <li class="header">
            <span class="cell">{{translate('设备ID')}}</span>
            <span class="cell">{{translate('钢琴ID')}}</span>
            <span class="cell">{{translate('安卓设备ID')}}</span>
            <span class="cell">{{translate('位置')}}</span>
            <span class="cell time">{{translate('上次初始化时间')}}</span>
            <span class="cell time">{{translate('首次初始化时间')}}</span>
            <span class="cell" style="width:250px;">{{translate('备注')}}</span>
        </li>
        {% for d in devices %}
        <li id="{{ d.id }}">
            <span class="cell">{{ d.id }}</span>
            <span class="cell" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ d.piano_id }}</span>
            <span class="cell">{{ d.tablet_id }}</span>
            <span class="cell">{{ d.position }}</span>
            <span class="cell time">{{ d.updated_at }}</span>
            <span class="cell time">{{ d.created_at }}</span>
            <span class="cell" style="width:250px;height:30px;"><span class="text">{{ d.comments }}</span><span class="glyphicon glyphicon-edit pull-right" style="margin-top:8px;"></span></span>
        </li>
        {% endfor %}
    </ul>
</div>
    <!-- <div class="m-back">
        <span class="arrow"></span>
        <button id="return" class="btn btn-default">返回</button>
    </div>
    <table class="table table-striped table-condensed table-bordered">
        <thead>
            <tr>
                <th>设备ID</th>
                <th>钢琴ID</th>
                <th>安卓设备ID</th>
                <th>位置</th>
                <th>上次初始化时间</th>
                <th>首次初始化时间</th>
                <th>备注</th>
            </tr>
        </thead>
        <tbody>
            {% for d in devices %}
            <tr id="{{ d.id }}">
                <td>{{ d.id }}</td>
                <td>{{ d.piano_id }}</td>
                <td>{{ d.tablet_id }}</td>
                <td>{{ d.position }}</td>
                <td>{{ d.updated_at }}</td>
                <td>{{ d.created_at }}</td>
                <td><span class="text">{{ d.comments }}</span><span class="glyphicon glyphicon-edit pull-right"></span></td>
            </tr>
            {% endfor %}
        </tbody>
    </table> -->
</div>
{% endblock %}
{% block js %}
<script type="text/javascript">
    $('.glyphicon-edit').bind('click',function(){
        var $input=$('<input type="text" >'),
            $parent=$(this).parent();
        var old_comments = $parent.find('.text').text();

        if($parent.find('input').length==0){
            $input.val($(this).prev().html());
            $parent.find('.text').remove();
            $parent.prepend($input);
            $input.focus();
        }

        // when input lost focus we send the request to server
        $input.blur(function(){
            var comments = $input.val();
            var $span = $('<span class="text"></span>');
            var device_id = $parent.parent().attr('id');

            if (comments!=old_comments){
                $.post('/school/classrooms/update_device_comment', {'did': device_id, 'comments': comments}, function(data){
                    if (data['code'] == 0){
                        $span.text(comments);
                    }
                    else {
                        $span.text(old_comments);
                        alert(data['msg']);
                    }
                }, 'json');
            }
            else {
                $span.text(old_comments);
            } // fi

            $parent.prepend($span);
            $input.remove();
        });
    });
    // $('#return').bind('click', function(){
    //     window.location.href = "{{ url_for('school.list_classrooms') }}";
    // });
</script>
{% endblock %}
